Use and Learn React without Install | Vite code editor

Learn React online using the Vite code editor – no setup needed!


Step 1: Open Vite Online Editor

  1. Go to 👉 vite.dev
  2. Click on the link to “Playground” or Vite Code Editor
  3. It will open a React project that runs directly in your browser

Now you’re ready to start coding – just like in VS Code!


Step 2: Edit App.jsx

Go to src/App.jsx and replace the existing code with:

<h1>Hello React</h1>


Create a New Component

  1. Inside the src folder, create a file called User.jsx
  2. Add the following code:
function User() {
return <h1>User Component</h1>;
}

export default User;


Now import the User component into App.jsx

import User from './User';

function App() {
return (
<>
<h1>Hello React</h1>
<User />
</>
);
}


Create a Counter with useState

Now let’s add a simple counter to learn about React state:

import { useState } from 'react';
import User from './User';

function App() {
const [counter, setCounter] = useState(0);

return (
<>
<h1>Counter Value: {counter}</h1>
<User />
<button onClick={() => setCounter(counter + 1)}>
Increase Counter
</button>
</>
);
}

Now click the button and see your counter increase live!


That’s It!

You just used:

  1. A React component
  2. The useState hook
  3. Vite’s online editor — no install needed!